---
title: Alert Info linear
category: Application
paid: false
isActive: true
ltr:
  {
    "html":
      {
        "htmlTail":
          [
            {
              "label": "index.html",
              "code": "<div class=\"max-w-5xl mx-auto px-4 md:px-8\">\n    <div class=\"flex justify-between p-4 rounded-md bg-blue-50 border border-blue-300\">\n        <div class=\"flex gap-3 sm:items-center\">\n            <div>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-blue-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                </svg>\n            </div>\n            <p class=\"text-blue-600 sm:text-sm\">\n                we have just released a new app version with so many features, you can <a href=\"javascript:void(0)\" class=\"underline font-medium hover:text-blue-700\">check it out?</a>\n            </p>\n        </div>\n    </div>\n</div>",
            },
          ],
      },
    "svelte":
      {
        "svelteTail":
          [
            {
              "label": "App.svelte",
              "code": "<div class=\"max-w-5xl mx-auto px-4 md:px-8\">\n    <div class=\"flex justify-between p-4 rounded-md bg-blue-50 border border-blue-300\">\n        <div class=\"flex gap-3 sm:items-center\">\n            <div>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-blue-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                </svg>\n            </div>\n            <p class=\"text-blue-600 sm:text-sm\">\n                we have just released a new app version with so many features, you can <a href=\"javascript:void(0)\" class=\"underline font-medium hover:text-blue-700\">check it out?</a>\n            </p>\n        </div>\n    </div>\n</div>",
            },
          ],
      },
    "vue":
      {
        "vueTail":
          [
            {
              "code": "<template>\n  <div class=\"max-w-5xl mx-auto px-4 md:px-8\">\n      <div class=\"flex justify-between p-4 rounded-md bg-blue-50 border border-blue-300\">\n          <div class=\"flex gap-3 sm:items-center\">\n              <div>\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-blue-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                  </svg>\n              </div>\n              <p class=\"text-blue-600 sm:text-sm\">\n                  we have just released a new app version with so many features, you can <a href=\"javascript:void(0)\" class=\"underline font-medium hover:text-blue-700\">check it out?</a>\n              </p>\n          </div>\n      </div>\n  </div>\n</template>",
              "label": "App.vue",
            },
          ],
        "vueCss": [],
      },
    "preview": "function App() {\n    return (\n        <div className=\"max-w-5xl mx-auto mt-12 px-4 md:px-8\">\n            <div className=\"flex justify-between p-4 rounded-md bg-blue-50 border border-blue-300\">\n                <div className=\"flex gap-3 sm:items-center\">\n                    <div>\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6 text-blue-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n                            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                        </svg>\n                    </div>\n                    <p className=\"text-blue-600 sm:text-sm\">\n                        we have just released a new app version with so many features, you can <a href=\"javascript:void(0)\" className=\"underline font-medium hover:text-blue-700\">check it out?</a>\n                    </p>\n                </div>\n            </div>\n        </div>\n    )\n}",
    "react":
      {
        "jsxTail":
          [
            {
              "label": "App.jsx",
              "code": "export default () => {\n    return (\n        <div className=\"max-w-5xl mx-auto px-4 md:px-8\">\n            <div className=\"flex justify-between p-4 rounded-md bg-blue-50 border border-blue-300\">\n                <div className=\"flex gap-3 sm:items-center\">\n                    <div>\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6 text-blue-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n                            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                        </svg>\n                    </div>\n                    <p className=\"text-blue-600 sm:text-sm\">\n                        we have just released a new app version with so many features, you can <a href=\"javascript:void(0)\" className=\"underline font-medium hover:text-blue-700\">check it out?</a>\n                    </p>\n                </div>\n            </div>\n        </div>\n    )\n}",
            },
          ],
        "jsxCss": [],
      },
  }
slug: /alerts
id: 7e190b13-53b2-4c83-870c-8d1a64022159
created_at: 1668364309777
---

<FUIAlertInfoLinear />
